<template>
	<view>
		<scroll-view scroll-x class="bg-white nav fixed">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==currentTabIndex?'text-orange cur':''" v-for="(item,index) in tabs" :key="index" @click="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<swiper :current="currentTabIndex" @change="swiperChange" :style="{height:swiperHeight+'px','margin-top':'90rpx'}">
			<swiper-item>
				<order-list :orders="orders[0]" id="list1"></order-list>
			</swiper-item>
			<swiper-item>
				<order-list :orders="orders[1]" id="list2"></order-list>
			</swiper-item>
			<swiper-item>
				<order-list :orders="orders[2]" id="list3"></order-list>
			</swiper-item>
			<swiper-item>
				<order-list :orders="orders[3]" id="list4"></order-list>
			</swiper-item>
			<swiper-item>
				<order-list :orders="orders[4]" id="list5"></order-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {OrderService} from "@/api/OrderService.js"
	import {orderList} from "@/components/order-list/order-list.vue"
	export default {
		components: {orderList},
		data() {
			return {
				currentTabIndex: 0,swiperHeight:0,defaultHeight:0,
				tabs:[{id:undefined,name:"全部"},{id:4,name:"待付款"},{id:1,name:"待发货"},{id:3,name:"待收货"},{id:6,name:"已完成"}],
				orders:[[],[],[],[]]
			}
		},
		watch:{
			currentTabIndex(newVal,OldVal){
				this.loadOrders();
			}
		},
		onPullDownRefresh() {
			this.loadOrders();
			uni.stopPullDownRefresh();
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.defaultHeight=(res.windowHeight * (750 / res.windowWidth));
				}
			});
		},
		onLoad(options) {
			this.currentTabIndex=parseInt(options.index);
		},
		methods: {
			tabSelect(e) {
				this.currentTabIndex = e.currentTarget.dataset.id;
			},
			swiperChange(e){
				this.currentTabIndex=e.target.current;
			},
			setSwiperHeight() {
				const that = this;
				this.$nextTick(function(){
					let obj = uni.createSelectorQuery().in(that).select("#list" + (that.currentTabIndex+1));
					obj.boundingClientRect((data)=>{
						if (data) {
							that.swiperHeight = data.height +20;
							if(that.swiperHeight<that.defaultHeight){
								that.swiperHeight=that.defaultHeight;
							}
						}
					}).exec();
				})
			},
			loadOrders(){
				const tab=this.tabs[this.currentTabIndex];
				const that=this
				OrderService.list(tab.id).then(res=>{
					this.$set(this.orders,this.currentTabIndex,res)
					this.setSwiperHeight();
				});
			}
		}
	}
</script>

<style lang="scss">
page{
  background-color: #F2F2F2;
}
</style>
